<template>
    <rx-dialog @ok="handleSubmit" @cancel="cancel">
        <rx-layout>
            <template #head>
                <div class="table-page-search-wrapper"  border="false">
                    <a-form >
                        <a-row :gutter="24">
                            <a-col  :span="12">
                                <a-form-item :label="mapI18n('modelName','模型名称')">
                                    <a-input :placeholder="mapI18n('PleaseModelName','请输入模型名称')" v-model:value="urlConfig.queryParam.Q_NAME__S_LK" />
                                </a-form-item>
                            </a-col>
                            <a-col  :span="12">
                              <span class="table-page-search-submitButtons">
                                <a-button type="primary" @click="searchQuery"> <template #icon><rx-icon-show  icon="icon-lineVue3_search"/></template>{{mapI18n('query','查询')}}</a-button>
                                <a-button style="margin-left: 4px" @click="resetSearch">{{mapI18n('reset','重置')}}</a-button>
                              </span>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </template>
            <template #middle>
                <rx-grid
                    ref="table"
                    :columns="columns"
                    url="/api-screen/screen/core/screenDataModel/query"
                    :hasPage="true"
                    field="ID_"
                    :urlConfig="urlConfig"
                    :selectConfig="selectConfig"
                    @selectMethod="selectData"
                >
                    <template #sourceType="{row}">
                        <a-tag v-if="row.sourceType" :color="typeMap[row.sourceType].color">
                            <span>{{ typeMap[row.sourceType].text }}</span>
                        </a-tag>
                    </template>
                </rx-grid>
            </template>
        </rx-layout>
    </rx-dialog>
</template>

<script>

import {RxDialog, RxLayout, RxGrid, Util} from '@lowcode/jpaas-base-lib';
import useMain from "../../../../stores/use-main";
import {mapState} from 'pinia';
export default {
    name: 'ScreenDataModelDialog',
    components: {
        RxDialog, RxLayout, RxGrid,
    },
    computed: {
        ...mapState(useMain, ["appId"])
    },
    props: {
        destroy: {
            type: Function
        },
    },
    data() {
        return {
            checkedData:"",//选择的对象
            columns: [
                {title: this.mapI18n('modelName', '名称'), field: 'name'},
                {title: this.mapI18n('sourceType', '来源类型'), field: 'sourceType', slots: {default: 'sourceType'}},
                {title: this.$ti18('rxForm.createTime', '创建时间'), field: 'createTime'}
            ],
			typeMap: {
				'interface': {color: 'blue', text: 'api'+this.mapI18n('interface','接口')},
				'dataSource': {color: 'green', text:this.mapI18n('dataSource','数据源')},
			},
            urlConfig: {
                ajaxType: 'post',//请求类型 post/get
                contentType: 'json',//类容类型
                queryParam: {},//请求参数
                //dataField,根据返回的参数来确定取哪一层的数据 如 res = { data:[] } ->  dataField:'data'
                // 如 res = { list:{data:[]} } -> dataField:'list.data' 依次类推;
                dataField: 'result.data',
                totalField:'result.totalCount'
            },
            selectConfig: {
                type: 'radio',//checkbox复选 / radio单选
                width: '60',
                trigger: 'row',//触发条件 row点击行 cell点击单元格 default点击控件本身
                checkMethod: ""
            },
        }
    },
    created(){
      let appId = this.appId;
      if(appId){
        this.urlConfig.queryParam.Q_APP_ID__S_EQ=appId;
      }
    },
    methods: {
        mapI18n(name, text, key) {
          return this.$ti18(name, text, "mapLang", key);
        },
        selectData(obj){
            this.checkedData=obj.row || ""
        },
        searchQuery(){
            this.$refs.table.loadData();
        },
        resetSearch(){
            this.urlConfig.queryParam={};
            this.$refs.table.loadData();
        },
        handleSubmit(vm) {
            if(!this.checkedData){
                this.$message.error(this.mapI18n('pleaseOne','请选择至少一个'));
                vm.loading = false;
                return;
            }
            Util.closeWindow(this,"ok",this.checkedData)
        },
        cancel() {
            Util.closeWindow(this,"cancel")
        },
    }
}
</script>
<style scoped>

</style>

